<template>
  <view>
    <!-- 筛选 -->
    <view class="filter">
      <text class="active">综合</text>
      <text>销量</text>
      <text>价格</text>
    </view>
    <!-- 商品列表 -->
    <scroll-view
      @scrolltolower="getMore"
      class="goods"
      scroll-y
    >
      <!-- 遍历 -->
      <view
        class="item"
        v-for="item in list"
        :key="item.goods_id"
        @click="goDetail(item.goods_id)"
      >
        <!-- 商品图片 -->
        <image
          class="pic"
          :src="item.goods_small_logo"
        />
        <!-- 商品信息 -->
        <view class="meta">
          <view class="name">{{ item.goods_name }}</view>
          <view class="price">
            <text>￥</text>{{ item.goods_price }}
            <text>.00</text>
          </view>
        </view>
      </view>
      <!-- 列表加载完成显示 -->
      <view
        class="nomore"
        v-if="nomore"
      >没有更多数据...</view>
    </scroll-view>
  </view>
</template>

<script>
/**
 * 小程序端列表分页
 * 原理：上拉加载更多=》检测列表是否滚动到底部(scroll-view)=>到底部加载下一页数据
 */
export default {
  data() {
    return {
      // 商品列表数据
      list: []
    }
  },
  computed: {
    // 列表数据是否加载完成
    nomore() {
      return this.list.length === this.total
    }
  },
  onLoad(query) {
    console.log('获取页面跳转query参数：', query)
    // 存储查询参数=》存到this
    this.query = query
    // 添加其他参数
    this.query.pagenum = 1 // 页码
    this.query.pagesize = 5 // 每页返回数据条数
    this.getList()
  },
  onReachBottom() {
    console.log('页面滚动到底部了！')
  },
  methods: {
    // 获取商品列表数据
    async getList() {
      const { data: { goods, total } } = await this.request({
        url: '/api/public/v1/goods/search',
        data: this.query
      })
      // console.log(goods)
      // 存储总条数
      this.total = total
      // 追加数据到列表
      this.list.push(...goods)
    },
    // 获取更多数据
    getMore() {
      console.log('列表区域滚动到底部了')
      // 获取下一页数据
      /**
       * 1. 数据是有限的，需要判断是否加载完了=》后端总条数total和list列表长度对比
       * 2. 参数页码加一，调用后台接口方法获取下一页数据（重复）
       */
      if (this.nomore) return;
      this.query.pagenum++
      this.getList()
    },
    goDetail(id) {
      uni.navigateTo({
        url: "/packone/goods/index?id=" + id
      });
    }
  }
};
</script>

<style scoped lang="scss">
.nomore {
  font-size: 32rpx;
  color: rgb(167, 166, 166);
  margin: 30rpx auto;
  text-align: center;
}
.filter {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 1rpx solid #ddd;

  /* #ifdef H5 */
  position: relative;
  z-index: 99;
  /* #endif */

  text {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.goods {
  position: absolute;
  width: 100%;
  top: 97rpx;
  bottom: 0;
}

.item {
  display: flex;
  padding: 30rpx 20rpx 30rpx 0;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .pic {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
  }

  .meta {
    flex: 1;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }
}
</style>
